<template>
  <div class="recruit-detail">
    <div class="recruit-box">
      <!--轮播图-->
      <div class="carousel-box">
        <swiper :options="swiperOption" class="pic-box" ref="mySwiper" v-if=slideList.length>
          <swiper-slide v-for="(slide,index) in slideList" :key="index">
            <img :src="slide" class="pic"
                 v-if="slide.indexOf('jpg') != -1 || slide.indexOf('png') != -1 || slide.indexOf('jpeg') != -1 || slide.indexOf('gif') != -1"
                 onclick="return false"/>

            <video class="video-con" id="videoBox" :poster="slide + '?vframe/png/offset/0.001'" preload="auto"
                   webkit-playsinline="true" playsinline="true" controls="controls"
                   x5-playsinline="true" loop="loop"
                   style="object-fit:cover" v-else>
              <source :src="slide" type="video/mp4">
            </video>

            <div class="canvas-box" v-show="showDevice"></div>

          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <img src="./back2.png" class="back-pic" v-if="backIcon == 0" @click="toBack" onclick="return false"/>
      </div>

      <div class="work-box">
        <div class="work-con">
          <div class="work-con1">
            <span class="name">{{mechanismName}}</span>
            <div class="return-fee-box"
                 v-if="workInfo.postType == 0 && workInfo.reStatus == 1 && workInfo.reMoney > 0 && workInfo.reTime > 0">
              <img src="./return_bg.png" class="fee-pic"/>
              <span class="fee-money">{{workInfo.reMoney}}元</span>
            </div>
            <div class="return-fee-box"
                 v-if="workInfo.postType == 1 && workInfo.reStatus == 1 && workInfo.addWorkMoney > 0 && workInfo.reTime > 0">
              <img src="./return_bg2.png" class="fee-pic2"/>
              <span class="fee-money">{{Math.floor(workInfo.addWorkMoney * 10) / 10}}元/时</span>
            </div>
          </div>
          <div class="work-con4">
            <span class="work">{{workName}}</span>
          </div>
          <div class="work-con5">
            <span>招{{maxNumber}}人</span>&nbsp;<span v-if="status != 1">/&nbsp;已报名{{applyNum}}人</span>
            <span class="full" v-if="status == 1">待招聘</span>
            <span class="money">{{money}}</span>
          </div>
          <div class="work-con3">
            <span class="lend" v-show="workInfo.lendType == 1">可借支</span>
            <span class="sex-title" v-if="workInfo.age">{{workInfo.age}}</span>
          </div>
          <div class="work-con2">
            <img src="./star.png" class="pic4"/><span class="score-num">{{score}}分</span>
            <span class="key" v-for="(key,index) in keyList" :key="index">{{key}}</span>
          </div>
        </div>
        <div class="fee-box"
             v-if="(workInfo.postType == 0 && workInfo.reStatus == 1 && workInfo.reMoney > 0 && workInfo.reTime > 0) || (workInfo.postType == 1 && workInfo.reStatus == 1 && workInfo.addWorkMoney > 0 && workInfo.reTime > 0)">
          <div class="title">奖励说明</div>
          <div class="content" v-html="feeDesc"></div>
        </div>
      </div>

      <div class="line-box"></div>

      <div class="work-desc-table-box">
        <table class="demand-table-box">
          <thead class="demand-table-text">岗位要求</thead>
          <tr>
            <td>性别年龄</td>
            <td v-html="sexAge"></td>
          </tr>
          <tr>
            <td>纹身染发</td>
            <td v-html="tattooHair"></td>
          </tr>
          <tr>
            <td>体检</td>
            <td v-html="medicalFee"></td>
          </tr>
          <tr>
            <td>视力</td>
            <td v-html="vision"></td>
          </tr>
          <tr>
            <td>文化技能</td>
            <td v-html="culturalSkills"></td>
          </tr>
          <tr>
            <td>民族</td>
            <td v-html="nation"></td>
          </tr>
          <tr>
            <td>身份证</td>
            <td v-html="idCard"></td>
          </tr>
          <tr>
            <td>其他要求</td>
            <td v-html="postOther"></td>
          </tr>

          <thead class="demand-table-text">薪资福利</thead>
          <tr v-if="workInfo.postType == 0">
            <td>底薪说明</td>
            <td v-html="workingPrice"></td>
          </tr>
          <tr v-if="workInfo.postType == 0">
            <td>加班费说明</td>
            <td v-html="overtimeDetails"></td>
          </tr>
          <tr v-if="workInfo.postType == 1">
            <td>工价</td>
            <td v-html="hoursPrice"></td>
          </tr>
          <tr>
            <td>补贴说明</td>
            <td v-html="subsidyDetails"></td>
          </tr>
          <tr>
            <td>发薪时间</td>
            <td v-html="payrollTime"></td>
          </tr>
          <tr>
            <td>其他说明</td>
            <td v-html="salaryOther"></td>
          </tr>

          <thead class="demand-table-text">食宿条件</thead>
          <tr>
            <td>住宿</td>
            <td v-html="accConditions"></td>
          </tr>
          <tr>
            <td>饮食</td>
            <td v-html="diet"></td>
          </tr>
          <tr>
            <td>其他说明</td>
            <td v-html="accOther"></td>
          </tr>

          <thead class="demand-table-text">工作时间</thead>
          <tr>
            <td>工作制</td>
            <td v-html="workSystem"></td>
          </tr>
          <tr>
            <td>班次时间</td>
            <td v-html="shiftTime"></td>
          </tr>
          <tr>
            <td>其他说明</td>
            <td v-html="workOther"></td>
          </tr>

          <thead class="demand-table-text">面试资料</thead>
          <tr>
            <td>面试资料</td>
            <td v-html="interviewData"></td>
          </tr>
          <tr>
            <td>其他说明</td>
            <td v-html="interviewOther"></td>
          </tr>
        </table>
      </div>

      <div class="line-box"></div>
      <!--企业简介-->
      <div class="brief-box">
        <div class="brief-con">
          <div class="title-box">
            <div class="line"></div>
            <div class="title">企业简介：</div>
          </div>
          <div class="content" v-html="brief"></div>
        </div>
        <div class="brief-con">
          <div class="title-box">
            <div class="line"></div>
            <div class="title">企业地址：</div>
          </div>
          <div class="address">
            <span>企业地址：</span><span v-html="briefAddr"></span>
          </div>
          <div class="address">
            <span>面试地址：</span><span v-html="recruitAddress"></span>
          </div>
        </div>
      </div>
    </div>


    <div class="btn-box">
      <div class="share-box" @click="server">
        <img src="./server.png" class="share" onclick="return false"/>
        <div class="title">咨询</div>
      </div>
      <div class="entry-box" v-if="showBtn == 1" @click="openApply">入职报名</div>
      <div class="entry-box" v-else-if="showBtn == 2" @click="openCancel">取消报名</div>
      <div class="other-box" v-else-if="showBtn == 3">停止报名</div>
      <div class="other-box" v-else-if="showBtn == 4">禁止报名</div>
    </div>


    <!--咨询弹出层-->
    <div class="server-modal" v-show="showServer" @click="closeServer"></div>
    <div class="server-box" v-show="showServer">
      <div class="server-con">
        <div class="title">驻厂联系方式</div>
        <div class="desc">微信搜索号码即可添加驻场微信</div>
        <div class="content-box">
          <div class="name">姓名：{{teacherName}}</div>
          <div class="mobile">电话：
            <span id="copy_text">{{teacherTel}}</span>
            <div class="copy" ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text"
                 @click="copyMobile">复制号码
            </div>
          </div>
        </div>
        <div class="call-btn-box">
          <button type="button" class="call" @click="callMobile">立即拨打</button>
        </div>
      </div>
    </div>

    <!--入职报名弹出层-->
    <div class="apply-modal" v-show="showApply" @click="closeApplyModal"></div>
    <div class="apply-box" v-show="showApply">
      <div class="title">企业入职报名</div>
      <div class="apply-con">
        <span class="real">真实姓名:</span>
        <div class="name-box">
          <input type="text" placeholder="请填写真实姓名" v-model="realName" class="name" maxlength="6"/>
        </div>
      </div>
      <div class="press-box">
        <button type="button" class="confirm" @click="confirmApply">确定</button>
      </div>
    </div>

    <v-dialog v-model="sendVal" content="请问是否确认取消报名？" cancelText="取消" confirmText="确认" @confirm="cancelApply"
              @cancel="close"></v-dialog>

    <!--报名成功弹出层-->
    <div class="success-modal" v-show="showSuccess">
      <div class="success-box">
        <div class="bg-box"><img src="./apply_bg.png" class="bg" onclick="return false"/></div>
        <div class="title">恭喜您,报名成功</div>
        <div class="suc-btn">
          <button type="button" class="detail" @click="download">下载APP查看报名详情</button>
        </div>
        <img src="./close.png" class="close" @click="closeSuccess" onclick="return false"/>
      </div>
    </div>

    <!--登录注册弹出层-->
    <div class="login-phone-cover" v-show="showModal" @click="closeLoginModal"></div>
    <div class="login-phone-modal" v-show="showModal" @touchmove.prevent>
      <div class="login-phone-box">
        <div class="phone-title1">
          <span class="login-title" :class="{'active-mark':showPage == 1}" @click="openLogin">登录</span>
          <span class="register-title" :class="{'active-mark':showPage == 2}" @click="openRegister">注册</span>
        </div>
        <div class="login-phone-con" v-if="showPage == 1">
          <div class="phone-title2">
            <span class="title1">手机号:</span>
            <div class="content">
              <input type="text" maxlength="11" class="phone" v-model="loginPhone" placeholder="请输入手机号"/>
            </div>
          </div>
          <div class="phone-title2">
            <div><span class="title1">密</span><span class="title2">码:</span></div>
            <div class="content">
              <input type="password" maxlength="16" class="phone" v-model="loginPwd" placeholder="请输入密码"/>
            </div>
          </div>

          <button type="button" class="phone-btn" @click="proxyLogin">登&nbsp;&nbsp;录</button>

          <span class="forget-pwd" @click="openForgetPwd">忘记密码?</span>
        </div>


        <div class="register-phone-con" v-if="showPage == 2">
          <div class="phone-title2">
            <span class="title1">手机号:</span>
            <div class="content">
              <input type="text" maxlength="11" class="phone" v-model="registerPhone" placeholder="请输入手机号"/>
            </div>
          </div>
          <div class="phone-title2">
            <span class="title1">验证码:</span>
            <div class="content">
              <input type="text" maxlength="6" class="code" placeholder="请输入验证码" v-model="codeNum"/>
            </div>
            <v-code ref="timerBtn" class="code_txt" v-on:run="sendCode">获取验证码</v-code>
          </div>
          <div class="phone-title2">
            <div><span class="title1">密</span><span class="title2">码:</span></div>
            <div class="content">
              <input type="password" maxlength="16" class="phone" v-model="registerPwd1" placeholder="请输入密码"/>
            </div>
          </div>
          <div class="phone-title2">
            <span class="title1">确认密码:</span>
            <div class="content">
              <input type="password" maxlength="16" class="phone" v-model="registerPwd2" placeholder="请确认密码"
                     @blur="inputBlur"/>
            </div>
          </div>

          <button type="button" class="phone-btn" @click="proxyRegister">注&nbsp;&nbsp;册</button>
        </div>


        <img src="./close2.png" class="close-box" @click="closeLoginModal" onclick="return false"/>
      </div>
    </div>


    <v-dialog v-model="downLoadModel" content="该企业需实名认证，请先下载APP完成实名认证后再报名" cancelText="稍后" confirmText="下载APP"
              @confirm="download"
              @cancel="closeDownLoadModel"></v-dialog>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import {getDevice, getSessionStore, getUrlKey, removeSessionStore, setSessionStore} from "../../../config/util"
  import Clipboard from 'clipboard'
  import dialog from "../../../components/dialog"
  import {Base64} from 'js-base64'
  import code from '../../../components/code'
  import {checkCode, checkName, checkPhone, checkPwd} from "../../../config/verify"
  import md5 from 'js-md5'

  export default {
    inject: ['reload'],
    data() {
      return {
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: false,
          loop: true,
          observer: true,
          observeParents: true,
        },
        workId: getUrlKey('workId'),
        slideList: [],
        feeDesc: "",
        brief: "",
        briefAddr: "",
        mechanismName: "",
        score: "",
        workName: "",
        maxNumber: "",
        applyNum: "",
        money: "",
        keyList: [],
        status: "",
        reTime: "",
        reMoney: "",
        interviewTime: "",
        mechanismId: "",
        recruitAddress: "",
        workInfo: "",
        showDevice: false,
        showBtn: 0,
        showApply: false,
        showServer: false,
        teacherName: "",
        teacherTel: "",
        realName: "",
        sendVal: false,
        name: "",
        showSuccess: false,
        apply: "",
        userName: "",
        userSign: "",
        identity: "",
        showModal: false,
        origin: "",
        loginPhone: "",
        loginPwd: "",
        showPage: 1,
        registerPhone: "",
        registerPwd1: "",
        registerPwd2: "",
        codeNum: "",
        token1: "",
        token2: "",
        backIcon: 0,
        sginMark: 2,
        sexAge: "",  //性别年龄
        tattooHair: "",  //纹身染发
        medicalFee: "",  //体检
        vision: "",  //视力
        culturalSkills: "",  //文化技能
        nation: "",  //民族
        idCard: "",  //身份证
        postOther: "", //岗位其他要求
        workingPrice: "",  //底薪说明
        hoursPrice: "",//工价
        overtimeDetails: "", //加班费说明
        subsidyDetails: "",  //补贴说明
        payrollTime: "", //发薪时间
        salaryOther: "", //薪资福利其他说明
        accConditions: "", //住宿
        diet: "", //饮食
        accOther: "",  //食宿条件其他说明
        workSystem: "",  //工作制度
        shiftTime: "", //班次时间
        workOther: "", //工作时间其他说明
        interviewData: "", //面试资料
        interviewOther: "",  //面试其他说明
        downLoadModel: false,
        isRealName: ''
      }
    },
    created() {
      this.showDevice = getDevice() == 'android' ? true : false;
      if (getSessionStore("user_sign")) {
        this.userSign = Base64.decode(getSessionStore("user_sign"));
        this.sginMark = 1;
      }

      if (getUrlKey("origin")) {
        setSessionStore("origin", getUrlKey("origin"));
      }
      if (getSessionStore("origin")) {
        this.origin = getSessionStore("origin");
      }

      if (getUrlKey("backIcon")) {
        setSessionStore("proxy_back_icon", getUrlKey("backIcon"));
      }
      if (getSessionStore("proxy_back_icon")) {
        this.backIcon = getSessionStore("proxy_back_icon");
      }

      this.getIdentity();
    },
    mounted() {
      this.copyMobile();
      this.queryWorkDetail();
      this.queryIsApplyCollect();
    },
    methods: {
      getIdentity() {
        if (getUrlKey("identity")) {
          setSessionStore("proxy_work_identity", getUrlKey("identity"));
        }

        if (getSessionStore("proxy_work_identity")) {//优先获取链接上的
          this.identity = getSessionStore("proxy_work_identity");
        }
      },
      queryWorkDetail() {//查询招工详情
        this.$vux.loading.show({
          text: '加载中',
        });

        this.axios.get(baseUrl + "/work/get_work_detail?workId=" + this.workId + "&identity=" + this.identity).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.imageList != null) {
              let picList = resultObj.data.imageList.split(";");//轮播图
              for (let i = 0, length = picList.length; i < length; i++) {
                this.slideList.push(picList[i]);
              }

              this.feeDesc = resultObj.data.reInstruction;//返费说明

              this.sexAge = resultObj.data.sexAge ? resultObj.data.sexAge : '无';//性别年龄
              this.tattooHair = resultObj.data.tattooHair ? resultObj.data.tattooHair : '无';//纹身染发
              this.medicalFee = resultObj.data.medicalFee ? resultObj.data.medicalFee : '无';//体检
              this.vision = resultObj.data.vision ? resultObj.data.vision : '无';//视力
              this.culturalSkills = resultObj.data.culturalSkills ? resultObj.data.culturalSkills : '无';//文化技能
              this.nation = resultObj.data.nation ? resultObj.data.nation : '无';//民族
              this.idCard = resultObj.data.idCard ? resultObj.data.idCard : '无';//身份证
              this.postOther = resultObj.data.postOther ? resultObj.data.postOther : '无';//岗位其他要求

              this.workingPrice = resultObj.data.workingPrice ? resultObj.data.workingPrice : '无';//底薪说明
              this.hoursPrice = resultObj.data.hoursPrice ? resultObj.data.hoursPrice : '无';//工价
              this.overtimeDetails = resultObj.data.overtimeDetails ? resultObj.data.overtimeDetails : '无';//加班費説明
              this.subsidyDetails = resultObj.data.subsidyDetails ? resultObj.data.subsidyDetails : '无';//补贴说明
              this.payrollTime = resultObj.data.payrollTime ? resultObj.data.payrollTime : '无';//发薪时间
              this.salaryOther = resultObj.data.salaryOther ? resultObj.data.salaryOther : '无';//薪资福利其他说明
              this.accConditions = resultObj.data.accConditions ? resultObj.data.accConditions : '无';//住宿
              this.diet = resultObj.data.diet ? resultObj.data.diet : '无';//饮食
              this.accOther = resultObj.data.accOther ? resultObj.data.accOther : '无';//食宿条件其他说明

              this.workSystem = resultObj.data.workSystem ? resultObj.data.workSystem : '无';//工作制度
              this.shiftTime = resultObj.data.shiftTime ? resultObj.data.shiftTime : '无';//班次时间
              this.workOther = resultObj.data.workOther ? resultObj.data.workOther : '无';//工作时间其他说明

              this.interviewData = resultObj.data.interviewData ? resultObj.data.interviewData : '无';//面试资料
              this.interviewOther = resultObj.data.interviewOther ? resultObj.data.interviewOther : '无';//面试其他说明

              this.brief = resultObj.data.mechanismDetails;//公司简介
              this.briefAddr = resultObj.data.mechanismAddress;//公司地址
              this.mechanismName = resultObj.data.mechanismName;//企业名称
              this.score = resultObj.data.mechanismScore;//企业评分
              this.workName = resultObj.data.workTypeName;//岗位名称
              this.maxNumber = resultObj.data.maxNumber;//需求人数
              this.applyNum = resultObj.data.applyNumber;//已报名数
              this.money = resultObj.data.postType == 1 ? resultObj.data.workMoney + "元/小时" : resultObj.data.wageRange + "元/月";//工种0正式1小时
              this.status = resultObj.data.status; //招工状态0正在招工1已经招满

              this.reTime = resultObj.data.reTime; //返费时间（单位：月）
              this.reMoney = resultObj.data.reMoney; //返费金额
              this.interviewTime = resultObj.data.interviewTime; //面试时间
              this.mechanismId = resultObj.data.mechanismId; //企业id
              this.recruitAddress = resultObj.data.recruitAddress; //面试地址
              if (resultObj.data.key != null && resultObj.data.key != "") {
                let key = resultObj.data.key.replace(/丨/g, "|").split("|"); //关键字
                for (let k = 0; k < key.length; k++) {
                  this.keyList.push(key[k]);
                }
              }
              this.workInfo = resultObj.data;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryIsApplyCollect() {//查询是否已报名 、实名认证、咨询联系方式、收藏
        this.axios.get(baseUrl + "/work/query_isApplyOrIsCollection?sgin=" + this.userSign + "&workId=" + this.workId + "&sginMark=" + this.sginMark).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.teacherTel = resultObj.data.teacher.teacherTel;//咨询联系方式
            this.teacherName = resultObj.data.teacher.teacherName;
            this.apply = resultObj.data.isApply;//0已报名 1未报名
            this.userName = resultObj.data.userName; //是否实名
            this.isRealName = resultObj.data.isRealname;//1需要去实名

            if (this.status == 1) {//停止报名
              this.showBtn = 3;
            } else if (this.apply == 0) {
              this.showBtn = 2;
            } else if (this.apply == 1) {
              this.showBtn = 1;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openApply() {//打开报名弹出层
        let reg = /^\+?[1-9][0-9]*$/;
        if (reg.test(parseInt(this.userSign))) {
          if (this.isRealName == 1) {
            this.downLoadModel = true;
          } else if (this.userName != "" && this.userName != undefined) {//已经实名
            this.entryApply(this.userName);
          } else {
            this.showApply = true;
          }
        } else {
          this.showModal = true;
          window.scrollTo(0, 0);
        }
      },
      openCancel() {//打开取消报名
        this.sendVal = true;
      },
      entryApply(name) {//入职报名
        this.$vux.loading.show({
          text: '加载中',
        });

        this.name = name;
        let data = {
          "identity": this.identity,
          "userName": this.name,
          "workId": this.workId,
          "origin": this.origin
        };

        this.axios.post(baseUrl + "/work/entry_apply_shop?type=0" + "&sgin=" + this.userSign, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("入职报名失败,请稍后重试!", "middle");
            } else {
              this.id = resultObj.data;
              this.showApply = false;
              this.showBtn = 2;
              this.showSuccess = true;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      cancelApply() {//取消报名
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {};
        this.axios.post(baseUrl + "/work/cancleApply?sgin=" + this.userSign + "&workId=" + this.workId, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          this.sendVal = false;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("取消报名失败,请稍后重试!", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      closeServer() {//关闭咨询弹出层
        this.showServer = false;
      },
      copyMobile() {//复制号码
        let clipboard = new Clipboard(this.$refs.copy);
        clipboard.on('success', e => {
          this.$vux.toast.text("复制成功", "middle");
          clipboard.destroy();// 释放内存
          this.showServer = false;
        });
        clipboard.on('error', e => {
          this.$vux.toast.text("复制失败，请手动复制", "middle");
          clipboard.destroy();
          this.showServer = false;
        });
      },
      callMobile() {//立即拨打
        window.location.href = 'tel://' + this.teacherTel;
        this.showServer = false;
      },
      closeApplyModal() {
        this.showApply = false;
      },
      confirmApply() {//确定报名
        if (checkName(this.realName)) {
          this.entryApply(this.realName);
        }
      },
      close() {//关闭取消报名
        this.sendVal = false;
      },
      closeSuccess() {//关闭报名成功
        this.showSuccess = false;
      },
      server() {//咨询
        this.showServer = true;
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      download() {//下载蓝聘
        window.location.href = "https://url.cn/5AUAFDU";
      },
      toBack() {
        if (getSessionStore("proxy_work_mark") == 1) {
          this.$router.push({path: "/proxywork"});
        } else if (getSessionStore("proxy_work_mark") == 2) {
          this.$router.push({path: "/serachproxywork"});
        }
        removeSessionStore("proxy_work_mark");
      },
      closeLoginModal() {
        this.showModal = false;
      },
      openLogin() {
        this.showPage = 1;
      },
      openRegister() {
        this.showPage = 2;
      },
      sendCode() {
        let phone = this.registerPhone;
        if (checkPhone(phone)) {
          this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=0").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=0" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      openForgetPwd() {
        this.$router.push({path: "/forgetpwd", query: {"workId": this.workId,"typePage":2}});
      },
      proxyLogin() {//登录
        if (checkPhone(this.loginPhone) && checkPwd(this.loginPwd, 1)) {
          this.commonLogin(this.loginPhone, this.loginPwd);
        }
      },
      commonLogin(phone, pwd) {
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {"phone": phone, "password": md5(pwd), "type": 0, "upIdentity": this.identity};
        this.axios.post(baseUrl + "/login/login", data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.data == "null") {
            this.$vux.toast.text("用户名或密码错误", "middle");
            return;
          } else if (resultObj.data == "error") {
            this.$vux.toast.text("用户名或密码错误", "middle");
            return;
          } else {
            this.showModal = false;
            let userArray = resultObj.data.split("#");
            setSessionStore("user_sign", Base64.encode(userArray[0]));
            this.reload();
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      affirmPwd() {
        let pwd1 = this.registerPwd1;
        let pwd2 = this.registerPwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      proxyRegister() {//注册
        let phone = this.registerPhone;
        let pwd1 = this.registerPwd1;
        let pwd2 = this.registerPwd2;
        let code = this.codeNum;

        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd1, 2) && this.affirmPwd()) {
          this.$vux.loading.show({
            text: '加载中',
          });
          //校验验证码
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=0&code=" + code + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              let data = {
                "phone": phone,
                "password": md5(pwd2),
                "type": 0,
                "upIdentity": this.identity,
                "origin": this.origin,
              };
              this.axios.post(baseUrl + "/login/add_user", data).then((res) => {//注册
                let resultObj = res.data;
                this.$vux.loading.hide();
                if (resultObj.code == 0 && resultObj.data == 0) {
                  this.commonLogin(this.registerPhone, this.registerPwd2);
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                }
              }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.loading.hide();
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      closeLoginModal() {
        this.showModal = false;
      },
      closeDownLoadModel() {
        this.downLoadModel = false;
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    components: {
      "v-dialog": dialog,
      "v-code": code
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .recruit-detail
    wh(100%, auto)
    .recruit-box
      .carousel-box
        position: relative
        wh(100%, 7.453rem)
        .pic-box
          wh(100%, 7.453rem)
          .pic
            wh(100%, 7.453rem)
          .video-con
            wh(100%, 7.453rem)
          .canvas-box
            position: absolute
            bottom: 0
            z-index: 9999
            wh(100%, 40%)
            background: #FFF
            opacity: 0
        .back-pic
          position: fixed
          top: 0.24rem
          left: 0.32rem
          z-index: 1
          wh(0.747rem, 0.747rem)
      .work-box
        margin: 0 auto
        wh(93.6%, auto)
        background: rgba(255, 255, 255, 1)
        .work-con
          wh(100%, auto)
          border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
          .work-con1
            fj(space-between, center)
            padding-top: 0.44rem
            padding-bottom: 0.24rem
            .name
              margin-right: 0.4rem
              size-color(0.453rem, rgba(51, 51, 51, 1))
              font-weight: 500
            .return-fee-box
              display: flex
              align-items: center
              position: relative
              .fee-pic
                wh(2.173rem, 0.853rem)
              .fee-pic2
                wh(2.347rem, 0.827rem)
              .fee-money
                position: absolute
                left: 0.85rem
                line-height: 0.853rem
                size-color(0.347rem, rgba(255, 148, 69, 1))
                font-weight: 500
          .work-con4
            fj(space-between, center)
            margin-bottom: 0.213rem
            .work
              size-color(0.427rem, rgba(60, 175, 255, 1))
              font-weight: 500
          .work-con2
            display: flex
            align-items: center
            margin-bottom: 0.48rem
            .pic4
              wh(0.32rem, 0.32rem)
            .score-num
              margin-left 0.187rem
              margin-right: 0.427rem
              size-color(0.347rem, rgba(250, 191, 72, 1))
              font-weight: 500
            .key
              margin-right: 0.16rem
              padding: 0.067rem 0.133rem
              background: rgba(245, 246, 247, 1)
              border-radius(0.053rem)
              size-color(0.293rem, rgba(128, 128, 128, 1))
              &:last-child
                margin-right: 0
          .work-con3
            display: flex
            flex-wrap: wrap
            size-color(0.293rem, rgba(128, 128, 128, 1))
            padding-bottom: 0.36rem
            .lend
              wh(1.147rem, 0.4rem)
              line-height: 0.4rem
              text-align: center
              margin-right: 0.107rem
              background: rgba(60, 175, 255, 1)
              border-radius(0.053rem)
              size-color(0.293rem, rgba(255, 255, 255, 1))
            .sex-title
              wh(auto, 0.347rem)
              border: 0.027rem solid rgba(60, 175, 255, 1)
              border-radius: 0.053rem
              size-color(0.293rem, rgba(60, 175, 255, 1))
              padding-left: 0.053rem
              padding-right: 0.053rem
              line-height: 0.347rem
          .work-con5
            display: flex
            align-items: center
            padding-bottom: 0.267rem
            size-color(0.347rem, rgba(153, 153, 153, 1))
            .full
              margin-left: 0.15rem
              padding: 0.04rem 0.107rem
              line-height: 0.373rem
              background: rgba(255, 142, 89, 1)
              border-radius(0.053rem)
              size-color(0.293rem, rgba(255, 255, 255, 1))
              font-weight: 500
            .money
              margin-left: auto
              size-color(0.427rem, rgba(255, 89, 89, 1))
              font-weight: 500
        .fee-box
          wh(100%, auto)
          padding-bottom: 0.533rem
          .title
            wh(2.293rem, 0.587rem)
            text-align: center
            line-height: 0.587rem
            margin-bottom: 0.4rem
            size-color(0.347rem, rgba(255, 142, 89, 1))
            background: rgba(255, 242, 217, 1)
            border-bottom-left-radius: 0.16rem
            border-bottom-right-radius: 0.16rem
            font-weight: 500
          .content
            margin-right: 0.28rem
            size-color(0.373rem, #666666)
            font-weight: 500
            line-height: 0.48rem
            >>> p
              size-color(0.373rem, #666666)
              font-weight: 500
              line-height: 0.48rem
      .work-desc-table-box
        margin: auto
        margin-top: 0.64rem
        margin-bottom: 0.8rem
        wh(93.6%, auto)
        .demand-table-box
          display: flex;
          flex-direction: column
          wh(100%, auto)
          border: 0.027rem solid rgba(235, 235, 235, 1)
          .demand-table-text
            wh(100%, 0.88rem)
            background: rgba(220, 235, 250, 1)
            size-color(0.4rem, #333)
            line-height: 0.88rem
            text-align: center
          tr
            display: flex
            wh(100%, auto)
            size-color(0.347rem, rgba(102, 102, 102, 1))
            &:last-child
              td
                border-bottom: 0 !important
            td
              padding-top: 0.2rem
              padding-bottom: 0.2rem
              vertical-align: middle
              &:nth-child(1)
                display: flex
                align-items: center
                border-right: 0.027rem solid rgba(235, 235, 235, 1)
                border-bottom: 0.027rem solid rgba(235, 235, 235, 1)
                padding-left: 0.32rem
                width: 2.4rem
              &:nth-child(2)
                padding-left: 0.32rem
                padding-right: 0.32rem
                line-height: 0.48rem
                flex: 1
                border-bottom: 0.027rem solid rgba(235, 235, 235, 1)
      .line-box
        wh(100%, 0.28rem)
        background: rgba(242, 242, 242, 1)
      .brief-box
        margin: 0 auto
        wh(92.53%, auto)
        .brief-con
          padding-top: 0.6rem
          wh(100%, auto)
          &:last-child
            padding-bottom: 1.88rem
          .title-box
            display: flex
            align-items: center
            margin-bottom: 0.427rem
            .line
              wh(0.08rem, 0.4rem)
              background: rgba(60, 175, 255, 1)
            .title
              margin-left: 0.28rem
              size-color(0.427rem, rgba(51, 51, 51, 1))
              font-weight: 500
          .content
            text-indent: 0.2rem
            size-color(0.373rem, #666666)
            line-height: 0.48rem
          .address
            size-color(0.373rem, #666666)
            &:last-child
              margin-top: 0.2rem
    .btn-box
      display: flex
      wh(100%, 1.333rem)
      position: fixed
      bottom: 0
      .share-box
        fj(center, center)
        flex-direction: column
        flex: 1
        height: 1.333rem
        border-right: 1px solid rgba(238, 238, 238, 1)
        background: #FFF
        .share
          wh(0.56rem, 0.56rem)
          padding-bottom: 0.08rem
        .title
          padding-top: 0.08rem
          size-color(0.293rem, rgba(66, 66, 66, 1))
      .entry-box
        flex: 1
        text-align: center
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        size-color(0.48rem, rgba(255, 255, 255, 1))
      .other-box
        flex: 1
        text-align: center
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(146, 146, 146, 1)
        size-color(0.48rem, rgba(255, 255, 255, 1))
    .server-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
    .server-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      margin: auto
      wh(8rem, 6.533rem)
      .server-con
        position: relative
        wh(100%, 100%)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .title
          padding-top: 0.64rem
          padding-bottom: 0.307rem
          text-align: center
          size-color(0.48rem, rgba(51, 51, 51, 1))
          font-weight: 500
        .desc
          text-align: center
          padding-bottom: 0.507rem
          size-color(0.373rem, rgba(204, 204, 204, 1))
        .content-box
          margin: 0 auto
          wh(6.933rem, 2rem)
          background: rgba(245, 247, 250, 1)
          border-radius(0.133rem)
          margin-bottom: 0.64rem
          .name
            padding-top: 0.467rem
            padding-bottom: 0.32rem
            margin-left: 0.427rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
          .mobile
            display: flex
            margin-left: 0.427rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
            .copy
              padding-left: 0.84rem
              size-color(0.373rem, rgba(60, 175, 255, 1))

        .call-btn-box
          wh(6.933rem, 1.067rem)
          margin: 0 auto
          .call
            text-align: center
            line-height: 1.067rem
            wh(6.933rem, 1.067rem)
            background: rgba(60, 175, 255, 1)
            border-radius(0.16rem)
            size-color(0.453rem, rgba(255, 255, 255, 1))
    .apply-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
    .apply-box
      position: fixed
      top: 1.34rem
      left: 0
      right: 0
      z-index: 98
      margin: auto
      wh(8rem, 4.72rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.173rem)
      .title
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        text-align: center
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .apply-con
        display: flex
        align-items: center
        justify-content: space-between
        padding-bottom: 0.4rem
        .real
          padding-left: 0.533rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .name-box
          display: flex
          align-items: center
          margin-right: 0.533rem
          wh(4.8rem, 0.96rem)
          border: 0.027rem solid rgba(224, 224, 224, 1)
          border-radius(0.16rem)
          .name
            padding-left: 0.1rem
            wh(90%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(147, 147, 147, 1))
      .press-box
        margin: 0 auto
        wh(6.933rem, 1.067rem)
        .confirm
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          wh(6.933rem, 1.067rem)
          line-height: 1.067rem
          text-align: center
          size-color(0.453rem, rgba(255, 255, 255, 1))
    .success-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .success-box
        position: fixed
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 98
        margin: auto
        wh(8rem, 6.053rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .bg-box
          wh(100%, 2.107rem)
          .bg
            wh(100%, 100%)
        .title
          padding-top: 0.8rem
          padding-bottom: 0.627rem
          text-align: center
          size-color(0.453rem, rgba(60, 175, 255, 1))
          font-weight: 500
        .success-con
          margin: 0 auto
          wh(6.933rem, 2rem)
          background: rgba(245, 247, 250, 1)
          border-radius(0.133rem)
          margin-bottom: 0.8rem
          display: flex
          flex-direction: column
          justify-content: center
          .name
            margin-left: 0.427rem
            padding-bottom: 0.16rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
          .company
            width: 90%
            margin-left: 0.427rem
            padding-top: 0.16rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
            ellipsis()
        .suc-btn
          fj(center, center)
          wh(6.933rem, 1.067rem)
          margin: 0 auto
          .detail
            line-height: 1.067rem
            text-align: center
            wh(6.933rem, 1.067rem)
            size-color(0.427rem, rgba(255, 255, 255, 1))
            background: rgba(60, 175, 255, 1)
            border-radius(0.16rem)
        .close
          position: absolute
          bottom: -1.5rem
          left: 0
          right: 0
          margin: auto
          wh(0.8rem, 0.8rem)
    .login-phone-cover
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
    .login-phone-modal
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 999
      .login-phone-box
        position: absolute
        left: 0
        top: 1.34rem
        right: 0
        margin: auto
        wh(8rem, auto)
        background: #FFF
        border-radius(0.16rem)
        box-sizing: border-box
        .phone-title1
          display: flex
          align-items: center
          justify-content: center
          wh(100%, 1.28rem)
          .login-title
            size-color(0.48rem, #999)
            height: 0.6rem
            line-height: 0.6rem
            margin-right: 0.96rem
          .register-title
            margin-left: 0.96rem
            height: 0.6rem
            line-height: 0.6rem
            size-color(0.48rem, #999)
          .active-mark
            color: #333
            font-weight: 500
            border-bottom: 0.053rem solid #3CAFFF
        .login-phone-con
          padding-top: 0.1rem
          margin: 0 auto;
          wh(6.933rem, auto)
          .forget-pwd
            display: flex
            justify-content: flex-end
            padding-bottom: 0.64rem
            size-color(0.373rem, rgba(60, 175, 255, 1))
        .register-phone-con
          padding-top: 0.1rem
          margin: 0 auto;
          wh(6.933rem, auto)
        .phone-title2
          fj(space-between, center)
          wh(100%, 0.96rem)
          margin-bottom: 0.213rem
          .title1
            padding-right: 0.1rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
          .title2
            size-color(0.427rem, rgba(51, 51, 51, 1))
            padding-left: 0.34rem
          .content
            display: flex
            align-items: center
            wh(4.907rem, 0.96rem)
            border: 0.027rem solid rgba(224, 224, 224, 1)
            border-radius(0.16rem)
            .code
              width: 58%
              padding-left: 0.1rem
              height: 0.6rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem

            .phone
              wh(80%, 0.6rem)
              padding-left: 0.1rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem
          .code_txt
            position: absolute
            right: 7.3%
            z-index: 2
            padding-left: 0.1rem
            padding-right: 0.1rem
            height: 0.9rem
            line-height: 0.9rem
            size-color(0.373rem, $color)
            font-weight: 500
            border: none
            background: #FFF
            border-radius(0.05rem)
        .phone-btn
          margin-top: 0.427rem
          margin-bottom: 0.427rem
          fj(center, center)
          wh(6.933rem, 1.067rem)
          border-radius: (0.16rem)
          background: rgba(60, 175, 255, 1)
          size-color(0.453rem, rgba(255, 255, 255, 1))
          font-weight: 500
        .close-box
          position: absolute
          bottom: -1.5rem
          left: 0
          right: 0
          margin: auto
          wh(0.8rem, 0.8rem)
</style>
